import React from "react";
import { Select } from "antd";
import classnames from "classnames";
import "./index.scss";

const { Option } = Select;
export default function FormSelect(props) {
  const {
    style = {},
    admLabel = "",
    labelPosition = "top",
    options = [],
    allowClear = true,
    showSearch = false,
    onChange = () => { },
    placeholder = "请选择",
    value = [],
    disabled = false,
    className = "",
    multiple = false,
    maxTagCount = 1,
    filterOption = (input, option) => {
      if (option.children.includes(input)) {
        return true;
      }
    },
    showUnlimit = false,
    isRequired = false,  // 标题前的*
    fieldNames = {
      value: 'value',
      label: 'label'
    }
  } = props;

  const handleOnChange = (v, option) => {
    onChange(v, option);
  };

  return (
    <div
      className={classnames({
        "zz-form-select": true,
        "form-select-top": labelPosition == "top",
        "form-select-left": labelPosition == "left",
        [className]: className != "",
      })}
    >
      {admLabel && (
        <div className="zz-form-name">
          {isRequired ? <label className="required">*</label> : null}
          <label>{admLabel}</label>
        </div>
      )}
      <div className="zz-form-content">
        <Select
          style={style}
          allowClear={allowClear}
          onChange={handleOnChange}
          value={value || []}
          placeholder={placeholder}
          showSearch={showSearch}
          maxTagCount={maxTagCount}
          showArrow={true}
          mode={multiple ? "multiple" : ""}
          disabled={disabled}
          filterOption={filterOption}
          getPopupContainer={(triggerNode) => triggerNode.parentElement}
        >
          {showUnlimit && (
            <Option key={"-1"} value={"-1"}>
              不限
            </Option>
          )}
          {options?.map((item, index) => {

            return (
              <Option key={index} value={item[fieldNames?.value || 'value']}>
                {item[fieldNames.label || 'label']}
              </Option>
            );
          })}
        </Select>
      </div>
    </div>
  );
}
